@charset "utf-8";
.flow-wrap{padding: 0 10px;overflow:hidden;border: solid 1px #eee;border-top: none;margin: 0 5px;}
.flow-title {padding: 5px 10px;background: #eeeeee;margin: 0 -10px 10px;height: 30px;}
.flow-title .text{ width:168px;}
.flow-title select.text{width: 60px;vertical-align:middle;}
.flow-step{margin-right: 180px;min-height: 307px;}
.flow-step .fs-item{width: 150px;background:#FBFBFB;float: left;margin: 0 45px 8px 0;position: relative;height: 143px;border-radius: 7px;border: solid 1px #FFF;}
.flow-step .fs-item:before{content:"";position:absolute;left:100%;width: 0;height: 0;border-top: 6px solid transparent;border-left: 8px solid #cccccc;border-bottom: 6px solid transparent;margin-left: 39px;top: 10px;z-index: 22;}
.flow-step .fs-item:after{content:"";display:block;width: 47px;height: 2px;position:absolute;left: 100%;top: 15px;background: #cecece;z-index: 2;}
.flow-step .fs-item .fs-t{height: 30px;line-height: 30px;color:#FFF;padding: 0 10px;background: #ccc;font-size: 12px;border-radius: 5px 5px 0 0;}
.flow-step .fs-item .fs-t .fr:before{content:"";display:block;width: 7px;height: 7px;background: #fff;border-radius:50%;float:left;margin: 12px 6px;}
.flow-step .fs-item .fs-b{padding: 5px 8px;overflow-y: auto;height: 102px;}
.flow-step .fs-item .fs-b p{margin-bottom:5px;}
.flow-step .fs-item .fs-b p.name{min-height: 52px;}
.flow-step .fs-item .fs-b b{display:inline-block;margin: 1px 0px 0;}
.flow-step .fs-item .add-flowPeo{position:absolute;bottom: -3px;right: -4px;width: 28px;height: 28px;border-radius:50%;background: url(/resources/images/ico-addFlowP.png) no-repeat center #21af46;cursor:pointer;}
.flow-step .fs-item.status01 {background: #fbfbfb;}
.flow-step .fs-item.status01 .fs-t{background: #34c55a;}
.flow-step .fs-item.status01:after{background: #61ce55;}
.flow-step .fs-item.status01:before{border-left: 8px solid #61ce55;}
.flow-step .fs-item.status02 {background: #fffafa;}
.flow-step .fs-item.status02 .fs-t{background: #d64c4c;}
.flow-step .fs-item.status02:before{border-left: 8px solid #d64c4c;}
.flow-step .fs-item.status03 {box-shadow: 2px 2px 10px rgba(165, 165, 165,0.5);border: solid 1px #4ca8d6;}
.flow-step .fs-item.status03 .fs-t{background: #4ca8d6;}
.flow-step .fs-item:last-child:after,.flow-step .fs-item:last-child:before{display:none}

.flow-replay{position:absolute;right: 0px;top:0;width: 151px;border: solid 1px #eee;padding: 8px;background: #fbfbfb;}
.flow-replay textarea{width: 100%;margin: 0px auto 8px;to;height: 132px;border: none;background: #FFF;}
.flow-replay .button,.flow-replay .iconButton{width: 100%;margin: 3px 0!important;padding: 0  !important;}
.flow-replay.f-disable textarea{background-color:#eee !important}
.flow-replay.f-disable .button,.flow-replay.f-disable .iconButton{background-color: #a2a2a2 !important;}

.flow-step-tab {border: solid 1px #eee;border-radius: 3px;margin-bottom: 8px;}
.flow-step-tab .hd ul{border-radius:5px;overflow:hidden;display: inline-block;border: solid 1px #a2a2a2;margin-top: 1px;}
.flow-step-tab .hd{overflow:hidden;background: #f7f7f7;padding: 5px 0 5px 10px;}
.flow-step-tab .hd li{height: 26px;line-height: 26px;float: left;background: #ffffff;min-width: 82px;text-align: center;border-left: solid 1px #a2a2a2;margin-left: -1px;cursor: pointer;}
.flow-step-tab .hd li.on{background: #a2a2a2;color:#FFF;font-size: 13px;}
.flow-step-tab .hd .flow-btn input{margin-right:5px}
.flow-btn .iconButton,.flow-btn .button{float: right;margin-right: 0;margin-left: 10px;}
.flow-btn .iconButton{background-image: url(/resources/images/ico-shenghe.png) !important;background-repeat: no-repeat !important;background-position:12px center !important}
.flow-btn .button{background-color: #f07878;}
.flow-title .flow-btn .iconButton{background-color: #02aae9 !important;background-image: url(/resources/images/ico-star.png) !important;}
.flow-step-tab .bd{padding:5px 10px}
.flow-step-tab .bd ul{ overflow:hidden}
.flow-form{overflow:hidden;}
.flow-form textarea{ width:100%; height:70px; border:solid 1px #DDD;margin-bottom:10px;border-radius:5px;}


/**/
.flow-boxL{float:left;width: 230px;position: fixed;top: 0px;left: 6px;bottom: 8px;}
.flow-boxL .title{font-size: 14px;color: #333;line-height: 20px;height: 20px;margin: 10px 12px 10px 0;background:url(/resources/images/ico-06.png) left center no-repeat;padding-left:25px;}
.flow-boxL .title a{ float:right; font-size:14px; color:#999}
.client-list{position: absolute;top: 40px;bottom:0;width:100%;overflow-y:auto;background: #fafafc;border-radius: 1px;padding-top: 1px;}
.client-list dl{ position: relative; }
.client-list dt{border-bottom: solid 1px #eee;background: url(/resources/images/ico-03.png) no-repeat 5px center;position: relative;padding-left: 32px;height: 50px;line-height: 50px;cursor: pointer;position: relative;font-size: 13px;color: #333;}
.client-list .c-operate i{ background:url(/resources/images/ico-01.png) no-repeat #000;width: 20px; height: 20px;border-radius: 50%; position: absolute;right:20px;top:16px;}
.client-list .c-operate .cp-wrap{ display:none; font-size: 14px; position: absolute;background: #FFFFFF;box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.38);border-radius: 4px;width:116px;text-align: center;right:8px;top:42px;padding:5px 0; z-index: 100}
.client-list .c-operate .cp-wrap a{ text-align:center; line-height: 24px; display: block; height:24px; border:none;}
.client-list .c-operate .cp-wrap a:hover{color: #76A7FF}
.client-list dd{padding: 0 0 0 32px;display: none;}
.client-list dd > div{ position: relative;}
.client-list dd a{height: 45px;line-height: 45px;display: block;border-bottom: solid 1px #F2F3F4;overflow: hidden;}
.client-list dl b{margin-left: 10px;}
.client-list dd a.on{ color: #3598DB }
.client-list dl.on{background: #fff;}
.client-list dl.on dt{ background-image: url(/resources/images/ico-04.png) }
.client-list dl.on dd{ display: block }
.client-list dd a.cur{ color: #76A7FF  }


.flow-boxR{position: fixed;right: 6px;top: 0px;left: 235px;bottom: 8px;}
